<template>
    <div class="home">
        <Header :head-title="name" go-back="true"></Header>
        <section class="group Result">
            <section class="swiperIn" @click="Code()">
                <div class="card_center">
                    <div class="center_left">
                        <span class="left_top">
                            奏凯
                        </span>
                        <span class="left_bottom">
                            4127*********1234
                        </span>
                    </div>
                    <div class="center_right">
                        <img class="right_top" src="../../assets/img/logo_.png" alt="">
                        <img class="right_bottom" src="../../assets/img/qrcode.png" alt="">
                    </div>
                </div>
            </section>
        </section>
        <section >
            <img class="Doctor" src="../../assets/img/Touxiang.png" alt="">
            <p class="fonts">李宁</p>
        </section>
        <div class="clear"></div>
        <section class="group Result">
            <div id="qrcode" ref="qrcode"></div>
            <img class="LogoJK" src="../../assets/img/logo_.png" alt="">
        </section>
        <!-- //只有电子健康卡显示 -->
        <section >
            <div class="GreenBtn">疫情期间就诊，可正常进入医院</div>
            <div class="GreenBtn Yellow">疫情期间就诊，请到分诊台核实信息</div>
            <div class="GreenBtn Red">疫情期间就诊，请直接前往发热门诊</div>
            <div class="GreenBtn Black">疫情期间就诊，请做好个人防护</div>
        </section>
        <section class="CodeB">
            <div class="Line"></div>
            <h3 class="fontsM">电子健康卡</h3>
            <p class="fonts">动态更新 适用于就诊各环节</p>
        </section>

    </div>
</template>

<script>
import Header from '../../components/Header'
import QRcode from 'qrcodejs2'
export default {
  data () {
    return {
      activeName: 'first',
      activeIndex: '1',
      radio: '1',
      radio1: '1',
      QRtext: 'HHPOIJPUH21974098KJUIHIUJ',
      codes: '',
      name: '奏凯'
    }
  },
  components: {
    Header
    // QRcode: QRcode
  },
  mounted () {
    this.$nextTick(() => {
      this.qrcode()
    })
  },
  methods: {
    handleClick (tab, event) {
    //   console.log(tab, event)
    },
    Label (index, value) {
      this.label = index
    },
    LabelZ (index, value) {
      this.labelZ = index
    },
    qrcode () {
      this.qrcode = new QRcode('qrcode', {
        width: 200, // 设置宽度，单位像素
        height: 200, // 设置高度，单位像素
        text: 'iuohwgiujreowijreoigwhrekjdnviwroj' // 设置二维码内容或跳转地址
        // colorDark: '#f49119' // 二维码颜色
      })
    }
  }
}
</script>

<style scoped>
.home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 0.8rem;
    background: #fff;
    overflow-y: auto;
}
#qrcode {
  margin: 0 auto;
  width: 53%;
  /* height: 2rem; */
}
.LogoJK {
    transform: translate(-50%,-50%);
}
.swiperIn {
    margin: 0.2rem auto;
    position: relative;
}
.CirCle {
    margin-top: 0.5rem;
    width: 100%;
}
.clear {
    clear: both;
}
.CodeB {
    /* position: relative; */
    width: 100%;
    margin-top: 1rem;

}
.CodeB p {
    padding: 0.1rem 0;
}
.CodeB h3 {
    background: #fff;
    z-index: 999;
    width: 40%;
    margin: 0 auto;
    /* height: 1rem; */
    display: block;
    position: relative;
}
.Line {
    height: 0.02rem;
    width: 100%;
    background: #aaa;
    position: relative;
    top: 0.25rem;
    z-index: 1;
}
.Result {
    padding: 0.2rem 0;
}
</style>
